<template>
<div>
	<n-layout has-sider style="height: 100%;max-height:85vh;">
        <n-layout-sider bordered collapse-mode="width" :collapsed-width="10" :width="240" :collapsed="collapsed"
         :show-trigger="true" @collapse="collapsed = true" @expand="collapsed = false">
            <n-menu class="overflow-y-auto overscroll-none" v-model:value="curModule" :collapsed="collapsed" :collapsed-width="64" :collapsed-icon-size="22"
            :options="menuOptions" key-field="moduleKey" label-field="moduleLabel"
            @update:value="handleUpdateValue" />
        </n-layout-sider>
        <n-layout-content>
            <s-container  @search="handleQuery" @reset="handleQueryReset" :loading="loading">
                <template #searchForm>
                    <n-form ref="searchRef" :label-width="80" :model="searchForm.value" label-placement="left" inline>
                        <n-form-item label="操作时间" path="operTime" class="fi-w">
                            <n-date-picker v-model:formatted-value="searchForm.value.operTime" type="date" clearable
                                format="yyyy-MM-dd" />
                        </n-form-item>
                        <!-- <n-space>
                            <n-button type="primary" @click="handleQuery">搜索</n-button>
                            <n-button type="warning" @click="handleQueryReset">重置</n-button>
                        </n-space> -->
                    </n-form>
                </template>
                <template #dataTable>
                    <loading-empty-wrapper class="flex-col flex-1" :loading="loading" :empty="empty">
                        <s-data-table :list="list" v-model:pageObj="pageObj"  :columns="columns" />
                    </loading-empty-wrapper>
                </template>
            </s-container>
        </n-layout-content>
        <n-layout />
    </n-layout>
</div>
</template>

<script  setup lang='tsx' >
import { h, ref, onMounted, reactive } from 'vue';
import { DataTableColumn, NSpace, FormInst, NMenu, NTag } from 'naive-ui';
import { BusinessStatus } from "@/enum";
import type { MenuOption } from 'naive-ui'
import { usePageList } from '@/hooks';
import { fetchLogPage, fetchLogModule } from '@/service/api/sys/operate-log'
import { SysOperateLog } from "./index"
interface DataSource extends SysOperateLog { }
const menuOptions = reactive<MenuOption[]>([]);
const curModule = ref<string|null>(null)
interface SearchForm {
    businessType?: number;
    method?: string;
    requestMethod?: string;
    operatorType?: string;
    operUserId?: string;
    deptName?: string;
    operUrl?: string;
    operIp?: string;
    operLocation?: string;
    operParam?: string;
    status?: number;
    errorMsg?: string;
    operTime?: string;
    module?: string;
}
const columns: DataTableColumn<DataSource>[] = [
    // {
    //     title: '日志主键',
    //     key: 'id',
    //     align: 'center',
    //     ellipsis: {
    //         tooltip: true
    //     }
    // },
    {
        title: '操作名称',
        key: 'name',
        align: 'center',
        ellipsis: {
            tooltip: true
        }
    },

    {
        title: '请求方式',
        key: 'requestMethod',
        align: 'center',
        ellipsis: {
            tooltip: true
        },
        render(row: DataSource) {
            let btnType: "default" | "info" | "error" | "primary" | "success" | "warning" | undefined;
            switch (row.requestMethod) {
                case 'GET':
                    btnType = 'info'
                    break;
                case 'POST':
                    btnType = 'success'
                    break;
                case 'PUT':
                    btnType = 'warning'
                    break;
                case 'DELETE':
                    btnType = 'error'
                    break;
                default:
                    btnType = 'info'
            }
            return <NTag style=" marginRight: '6px'" type={btnType} bordered={false}>{row.requestMethod}</NTag>
        }
    },

    {
        title: '操作人员',
        key: 'nickName',
        align: 'center',
        ellipsis: {
            tooltip: true
        }
    },
    {
        title: '请求URL',
        key: 'operUrl',
        align: 'center',
        ellipsis: {
            tooltip: true
        }
    },
    {
        title: '主机地址',
        key: 'operIp',
        align: 'center',
        ellipsis: {
            tooltip: true
        }
    },
    {
        title: '操作地点',
        key: 'operLocation',
        align: 'center',
        ellipsis: {
            tooltip: true
        }
    },

    {
        title: '操作状态',
        key: 'status',
        align: 'center',
        ellipsis: {
            tooltip: true
        },
        render(row: DataSource) {
            return h(
                NTag,
                {
                    style: {
                        marginRight: '6px'
                    },
                    type: String(row.status) === BusinessStatus.Yes ? 'info':'error',
                    bordered: false
                },
                {
                    default: () => String(row.status) === BusinessStatus.Yes ? "成功" : "失败"
                }
            )
        }
    },

    {
        title: '操作时间',
        key: 'operTime',
        align: 'center',
				sorter:true,
        ellipsis: {
            tooltip: true
        }
    },
		{
			title:"耗时",
			key:"consumeTime",
			align: 'center',
			sorter:true,
        ellipsis: {
            tooltip: true
        }
		}
];

const searchRef = ref<FormInst | null>(null)
let collapsed = ref(false);
const {
	loading,
	empty,
	list,
	searchForm,
	pageObj,
	getList,
	handleQueryReset,
	handleQuery
 } = usePageList<DataSource>(
	initSearchFormData,
	fetchLogPage,
	undefined,
	undefined
);



function initSearchFormData(): SearchForm {
    return {}
}

async function getLogModule() {
    const { data } = await fetchLogModule();
    for (let index = 0; index < data!.length; index++) {
        menuOptions[index] = {
            moduleKey: index,
            moduleLabel: data![index],
        }
    }
}

function handleUpdateValue(key: string, item: MenuOption) {
		const moduleLabel =  String(item.moduleLabel)
		if(searchForm.value.module == moduleLabel){
			searchForm.value.module = ''
			curModule.value = null
		}else{
			searchForm.value.module = moduleLabel
		}
    pageObj.current = 1
    pageObj.size = 10
    getList()
}

onMounted(async () => {
    await getLogModule()
		handleQuery()
		// handleUpdateValue("",menuOptions[0]);
})
</script>

<style lang='scss' scoped>
.left-card {
    height: 100%;
    min-width: 350px;
    max-width: 450px;
    flex: 4;
}

.right-card {
    height: 100%;
    min-width: 500px;
    flex: 6;
}
</style>
